import { getProListFn, getBannerListFn } from "./api/home";

import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";


import { changeProList,changeBannerList } from "./store/modules/home"


export default function Home(){

    // 获取修改方法 dispatch
    const dispatch = useDispatch()


    // 获取全局状态中的 proList
    const proList = useSelector(state=>state.home.proList)
    // 获取轮播图数据
    const bannerList = useSelector(state=>state.home.bannerList)

     // useEffect 会在挂载阶段，更新阶段，卸载阶段执行(相当于类组件的生命周期)

     useEffect(()=>{
        
        getProListFn().then(res=>{
            // console.log(res.data.data);
            // 将数据放在全局状态中
            // 修改数据
            dispatch(changeProList(res.data.data))
        })

        //  发送数据请求
        getBannerListFn().then(res=>{
            // console.log(res.data.data);
            // dispatch({type: CHANGE_BANNER_LIST, payload: res.data.data})
            dispatch(changeBannerList(res.data.data))
        })
     },[])

    return <> 
    <ul>
        {proList.map(item=><li key={item.proid}>{item.proname}</li>)}
    </ul>

     <ol>
            {bannerList && bannerList.map(item => {
                return <li key={item.bannerid}>
                    <img src={item.img} style={{ width: 200 }} alt="" />
                </li>
            })}
        </ol>
    </>
    

}